import { Checkbox } from "@ct0/ui";
import React, { useState } from "react";

const { CheckboxGroup } = Checkbox;

import { createUseStyles } from "react-jss";

export default CheckboxPanel;

const useStyles = createUseStyles({
  invalid: {
    "&:not(.ct0-checkbox-disabled).ct0-checkbox-border": {
      borderColor: "#c55252",
    },
    "&:not(.ct0-checkbox-disabled) .ct0-checkbox": {
      borderColor: "#c55252",
    },
    "& .ct0-checkbox-single": {
      color: "#c55252",
    },
  },
});

function CheckboxPanel() {
  const [value, setValue] = useState([1]);
  const [checked, setChecked] = useState(false);
  const classes = useStyles();

  const options = [
    { value: 1, label: "测试1 (禁用状态)", disabled: true },
    { value: 2, label: "测试2" },
    { value: "3", label: "测试3" },
  ];

  return (
    <div>
      <h2>Checkbox</h2>
      <div>
        <Checkbox
          label="Alpha"
          value="a"
          checked={checked}
          onChange={(_, checked) => setChecked(checked)}
        />
      </div>
      <br />
      <h2>CheckboxGroup 多选框</h2>
      <ul>
        <li>在一组可选项中进行多项选择时</li>
        <li>所有备选项默认可见，方便用户在比较中选择，但是选项不宜过多</li>
      </ul>

      <h2>代码演示</h2>
      <h4>有边框</h4>
      <CheckboxGroup
        border
        options={options}
        value={value}
        onChange={setValue}
      />
      <br />
      <h4>没有边框</h4>
      <CheckboxGroup options={options} value={value} onChange={setValue} />
      <br />
      <h4>错误校验</h4>
      <CheckboxGroup
        className={classes.invalid}
        border
        options={options}
        value={value}
        onChange={setValue}
      />
      <br />

      <div>已选值： {value.join(", ")}</div>

      <h2>调用方式</h2>
      <div className="code" style={{ marginTop: "10px" }}>
        <pre>
          <code className="language-jsx">
            import {"\u007b"} Checkbox {"\u007d"} from '@ct0/ui'{"\n"}
            {`
const { CheckboxGroup } = Checkbox

const options = [
  { value: 1, label: '测试1 (禁用状态)', disabled: true },
  { value: 2, label: '测试2' },
  { value: '3', label: '测试3' },
];

const [value, setValue] = useState([]);

ReactNom.render(<CheckboxGroup valid border options={options} value={value} onChange={setValue} />, dom)
            `}
          </code>
        </pre>
      </div>

      <h2>API</h2>
      <table border="1">
        <thead>
          <tr>
            <th>参数</th>
            <th>必填</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>value</td>
            <td>*</td>
            <td>设置当前选中的值</td>
            <td>任意类型，默认 (string | number)[]</td>
            <td>-</td>
          </tr>
          <tr>
            <td>options</td>
            <td>*</td>
            <td>备选项</td>
            <td>{`Array<{ label: string, value: string | number, disabled?: boolean }>`}</td>
            <td>-</td>
          </tr>
          <tr>
            <td>border</td>
            <td></td>
            <td>边框</td>
            <td>boolean</td>
            <td>false</td>
          </tr>
          <tr>
            <td>onChange</td>
            <td></td>
            <td>选项变化时的回调函数</td>
            <td>(val:T)=&gt;void</td>
            <td>-</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
